<div
  [id]="'t' + dataSource.id"
  class="title tool-title dark-primary dark-border-color"
  *ngIf="dataSource && dataSource.title"
>
  <div
    class="cursor-pointer whitespace-nowrap ellipsis pr-4 flex items-center"
    (click)="onCollapse.emit()"
  >
    <i
      class="iconfont iconjiantouarrow483 down-arrow"
      [class.active]="dataSource.collapsed"
    >
    </i>

    <i
      class="iconfont iconyinru text-neutral-400"
      *ngIf="isLogin && dataSource.rId"
    ></i>

    <span class="ml-1 self-center align-middle">
      {{ dataSource.title }} x {{ dataSource.nav.length }}
    </span>

    <ng-content *ngIf="dataSource.id !== -1">
      <i
        nz-icon
        nzType="edit"
        class="edit-icon"
        *ngIf="isLogin"
        (click)="handleEditName($event, dataSource)"
      ></i>
      <i
        nz-icon
        nzType="swap"
        class="edit-icon"
        *ngIf="isLogin"
        (click)="openMoveModal($event, dataSource)"
      ></i>
      <i
        nz-icon
        nzType="delete"
        class="edit-icon"
        *ngIf="isLogin"
        (click)="handleDelete($event, dataSource.id)"
      ></i>
    </ng-content>
  </div>

  <i
    *ngIf="dataSource.id !== -1 && (isLogin || permissions.create)"
    nz-icon
    nzType="plus"
    nzTheme="outline"
    class="add-icon"
    (click)="openCreateWebModal()"
  >
  </i>
</div>
